<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>check print</title>
	<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-css/css/bootstrap.css">
	<script src="/vendor/mootools/dist/mootools-core.js"></script>
	<script src="/js/ejs.js"></script>
	<style>
		th {text-align: center;}
		caption { font-size: 1.2em; font-weight: bold;}
	</style>
</head>
<body>
	<script type="text/template" id="totalTable">
			<table class="table table-hover table-striped text-center ">
				<thead>
					<tr>
						<th>Total of uploaded photos</th>
						<th>Total of printed photos</th>
						<th>Total access of share pages</th>
						<th>Total access of share pages from wechat</th>
						<th>Total of emails been sent</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><%= data.photoTotal %></td>
						<td><%= data.printTotal %></td>
						<td><%= data.shares.length %></td>
						<td><%= data.shares.filter(function(d){return d.user_agent == 'wechat';}).length %></td>
						<td><%= data.emails.length %></td>
					</tr>
				</tbody>
			</table>
	</script>
	<script type="text/template" id="shareTable">
			<table class="table table-hover table-striped text-center ">
				<caption>Share Access </caption>
				<thead>
					<tr>
						<th>Url</th>
						<th>Share Id</th>
						<th>UA Type</th>
						<th>UA IP</th>
						<th>Date and Time</th>
					</tr>
				</thead>
				<tbody>
					<% data.shares.each(function(d){ %>
						<tr>
							<% var dt = new Date(d.timestamp - 0); %>
							<td width="400"><a href="<%= decodeURIComponent(d.referer) %>" style="word-wrap:break-word;word-break:break-all;"><%= decodeURIComponent(d.referer) %></a></td>
							<td><%= d.uri_map %></td>
							<td><%= d.user_agent %></td>
							<td><%= d.ip %></td>
							<td><%= dt.toLocaleDateString() + " " + dt.toLocaleTimeString()  %></td>
						</tr>
					<% }); %>
				</tbody>
			</table>
	</script>
	<script type="text/template" id="emailTable">
			<table class="table table-hover table-striped text-center ">
				<caption>Email</caption>
				<thead>
					<tr>
						<th>Email Address</th>
						<th>Name</th>
						<th>Share Id</th>
						<th>Date and Time</th>
					</tr>
				</thead>
				<tbody>
					<% data.emails.each(function(d){ %>
						<tr>
							<% var dt = new Date(d.timestamp - 0); %>
							<td><%= d.email %></td>
							<td><%= d.name %></td>
							<td><%= d.uri_map %></td>
							<td><%= dt.toLocaleDateString() + " " + dt.toLocaleTimeString()  %></td>
						</tr>
					<% }); %>
				</tbody>
			</table>
	</script>
	<header>
		<h1 class="text-center">Wephoto Event Data</h1>
	</header>
	<div class="container">
		<div class="row">
			<input class="form-control" id="eventId" type="text" placeholder="Input event id and enter">
		</div>
		<div class="row" id="imagesDownload" style="margin-top:12px;display:none;">
			<button class="btn btn-primary" action="download">下载所有照片</button>
			<button class="btn btn-primary" action="downloadFrame">下载所有照片（带水印）</button>
			<button class="btn btn-primary" action="downloadCrop">下载所有照片（已剪切）</button>
		</div>
		<div class="row total-table clearfix" style="margin-top: 30px;">
		</div>
		<div class="row" id="shareAccess" style="margin-top: 30px;">
		</div>
		<div class="row" id="emailSent" style="margin-top: 30px;margin-bottom: 80px;">
		</div>
	</div>
	<script type="text/javascript">
		$('eventId').addEvent('keydown', function(e){
			if(e.key === 'enter'){
				var eventId = $(this).get('value').trim();
				var onsuccess = function(d){
					var tt_tpl = $('totalTable').get('html');
					var st_tpl = $('shareTable').get('html');
					var et_tpl = $('emailTable').get('html');
					
					var tt = ejs.render(tt_tpl, {data: d});
					var st = ejs.render(st_tpl, {data: d});
					var et = ejs.render(et_tpl, {data: d});

					document.getElement('.total-table').set('html', tt);
					$('shareAccess').set('html', st);
					$('emailSent').set('html', et);
					if(d.photoTotal > 0){
						$('imagesDownload').setStyle('display','block').set('event-id', eventId);

					}else{
						$('imagesDownload').setStyle('display','none').erase('event-id');
					}
				}
				eventId = Number.from(eventId);
				if(!eventId)
					return
				new Request.JSON({
					'url': '/eventData/' + eventId,
					'onSuccess': onsuccess
				}).get();
			}
		});

		$$('[action]').addEvent('click', function(evt){
			var ele = $(this);
			var action = ele.get('action');
			var eventId = ele.getParent('div').get('event-id');
			var onsuccess = function(res){
				if(res.msg == 'ok'){
						setTimeout(function(){
							location.href = '/sendfile/' + res.name;

						}, 0);
				}
			}
			if(!eventId)
				return
			new Request.JSON({
				'url': '/photolist/' + eventId,
				onSuccess: onsuccess
			}).get({
				'action': action
			});
		});
	</script>
</body>
</html>